<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form" label-width="120px" :model="formModel" :rules="rules">
      <el-form-item label="当前工位:" prop="ulocNo">
        <el-select v-model="formModel.ulocNo" clearable filterable>
          <el-option
            v-for="item in ulocOptions"
            :key="item.ulocNo"
            :label="item.ulocName"
            :value="item.ulocNo"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="车辆VIN码:" prop="vin">
        <el-input v-model="formModel.vin" @keyup.prevent.native.enter="queryKeyPart" />
      </el-form-item>
      <el-form-item label="安装零件序列号:" prop="scanTrackNo">
        <el-input v-model="formModel.scanTrackNo" @keyup.prevent.native.enter="bindKeyPart" />
      </el-form-item>
    </el-form>
    <div class="tag-group">
      <h3 class="tag-group__title">未绑定关键件</h3>
      <el-tag
        v-for="tag in unBindKeyParts"
        :key="tag"
        style="margin: 10px"
        :type="'danger'"
        effect="plain"
      >{{ tag }}</el-tag>
    </div>
    <div class="tag-group">
      <h3 class="tag-group__title">已绑定关键件</h3>
      <el-tag
        v-for="tag in bindKeyParts"
        :key="tag"
        style="margin: 10px"
        :type="'success'"
        effect="plain"
      >{{ tag }}</el-tag>
    </div>
  </div>
</template>
<script>
export default {
  name: 'KeyPartTrackBind',
  data() {
    return {
      formModel: {
        ulocNo: '',
        vin: '',
        scanTrackNo: ''
      },
      plantOptions: [],
      ulocOptions: [],
      bindKeyParts: [],
      unBindKeyParts: [],
      rules: {
      }
    }
  },
  mounted() {
    this.initRules()
    this.getUlocOptions()
  },
  created() {
  },
  methods: {
    initRules() {
      const REQUIRED_MSG = this.CONST.REQUIRED_MSG
      this.rules = {
        ulocNo: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        scanTrackNo: this.HEY_VALIDATOR({ type: ['SCAN_TRACK_NO'], required: false })
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    queryKeyPart() {
      const param = { vin: this.formModel.vin, ulocNo: this.formModel.ulocNo }
      this.get('/orderQasKeyPartTrack/getBindAndUnbindKeyPart', param).then(res => {
        this.unBindKeyParts = res.unBindKeyParts
        this.bindKeyParts = res.bindKeyParts
      })
    },
    // 获取当前用户的工位列表
    getUlocOptions(param) {
      this.get('/userUloc/listUserUlocByUser', param).then(res => {
        this.ulocOptions = res
        // 默认选中第一个
        this.formModel.ulocNo = res[0].ulocNo
      })
    },
    // 绑定追溯件
    bindKeyPart() {
      const param = { ulocNo: this.formModel.ulocNo, vin: this.formModel.vin, scanTrackNo: this.formModel.scanTrackNo }
      const tip = '绑定成功'
      this.post('/orderQasKeyPartTrack/bindKeyPart', param).then(res => {
        this.$info(tip, () => {
          this.$emit('mntSuc', res)
          this.queryKeyPart()
        })
      })
    }
  }
}
</script>
